<!--
 * @Author       : xiaowu wwl093000@163.com
 * @Date         : 2023-05-11 20:38:43
 * @LastEditTime : 2023-07-19 09:58:38
 * @LastEditors  : xiaowu wwl093000@163.com
 * @FilePath     : /erp-admin-ui/src/views/userInfo/collect/index.vue
 * @Description  : -采集主管首页
-->
<template>
  <div class="dashboard-editor-container">

    <collect-group />

    <el-row>
      <el-col>
        <div class="chart-wrapper">
          <p>采集人员任务列表</p>
          <div class="chart-wrapper-box">
            <el-table
              :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}"
              :data="cjryData" 
              border
              style="width: 100%"
              v-loading="cjryloading"
            >
              <el-table-column prop="userName" label="姓名"></el-table-column>
              <el-table-column prop="unEndNumber" label="未完成任务数" />
              <el-table-column prop="endNumber" label="已完成任务数" />
            </el-table>
            <pagination
              v-show="cjrytotal>0"
              :total="cjrytotal"
              :page.sync="cjryParams.pageNum"
              :limit.sync="cjryParams.pageSize"
              @pagination="getGatherTaskAllocationData"
            />
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col>
        <div class="chart-wrapper">
          <p>近一个月商品销售排行（销售金额累计TOP50）</p>
          <div class="chart-wrapper-box">
            <el-table
              :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}"
              :data="spxsData" 
              border
              style="width: 100%"
              v-loading="spxsloading"
            >
              <el-table-column prop="index" label="序号" width="50">
              </el-table-column>
              <el-table-column prop="productName" label="商品名称"></el-table-column>
              <el-table-column prop="orderNumber" label="订单数" />
              <el-table-column prop="saleNumber" label="销售金额" />
              <el-table-column prop="profitAmount" label="利润" />
              <el-table-column prop="profitRate" label="利润率" />
            </el-table>
            <pagination
              v-show="spxstotal>0"
              :total="spxstotal"
              :page.sync="spxsParams.pageNum"
              :limit.sync="spxsParams.pageSize"
              @pagination="getGatherGoodSaleRankingMonthData"
            />
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col>
        <div class="chart-wrapper">
          <p>近一个月类目销售排行（销售金额累计TOP20）</p>
          <div class="chart-wrapper-box">
            <el-table
              :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}"
              :data="lmxsData" 
              border
              style="width: 100%"
              v-loading="lmxsloading"
            >
              <el-table-column prop="index" label="序号" width="50">
              </el-table-column>
              <el-table-column prop="categoryName" label="类目名称"></el-table-column>
              <el-table-column prop="orderNumber" label="订单数" />
              <el-table-column prop="saleNumber" label="销售金额" />
              <el-table-column prop="profitAmount" label="利润" />
              <el-table-column prop="profitRate" label="利润率" />
            </el-table>
            <pagination
              v-show="lmxstotal>0"
              :total="lmxstotal"
              :page.sync="lmxsParams.pageNum"
              :limit.sync="lmxsParams.pageSize"
              @pagination="getGatherCategoryIdSaleRankingMonthData"
            />
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col>
        <div class="chart-wrapper margin0">
          <p>近一个月国家销售排行（销售金额累计TOP10）</p>
          <div class="chart-wrapper-box">
            <el-table
              :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}"
              :data="gjxsData" 
              border
              style="width: 100%"
              v-loading="gjxsloading"
            >
              <el-table-column prop="index" label="序号" width="50">
              </el-table-column>
              <el-table-column prop="countryName" label="国家名称"></el-table-column>
              <el-table-column prop="orderNumber" label="订单数" />
              <el-table-column prop="saleNumber" label="销售金额" />
              <el-table-column prop="profitAmount" label="利润" />
              <el-table-column prop="profitRate" label="利润率" />
            </el-table>
            <pagination
              v-show="gjxstotal>0"
              :total="gjxstotal"
              :page.sync="gjxsParams.pageNum"
              :limit.sync="gjxsParams.pageSize"
              @pagination="getGatherCountrySaleRankingMonthData"
            />
          </div>
        </div>
      </el-col>
    </el-row>

    <notice />
  </div>
</template>

<script>
import CollectGroup from '../../dashboard/CollectGroup'
import OrderChart from '../../dashboard/OrderChart'
import {
  GatherTaskAllocationData,
  GatherGoodSaleRankingMonthData,
  GatherCategoryIdSaleRankingMonthData,
  GatherCountrySaleRankingMonthData
} from "@/api/index/index"
import Notice from '../../dashboard/Notice'

export default {
  name: 'collectPage',
  components: {
    CollectGroup,
    OrderChart,
    Notice
  },
  data() {
    return {
      cjryData: [], // 采集人员
      spxsData: [], // 商品销售
      lmxsData: [], // 类目销售
      gjxsData: [], // 国家销售
      cjryParams: {
        pageSize: 10,
        pageNum: 1
      },
      spxsParams: {
        pageSize: 10,
        pageNum: 1
      },
      lmxsParams: {
        pageSize: 10,
        pageNum: 1
      },
      gjxsParams: {
        pageSize: 10,
        pageNum: 1
      },
      cjrytotal: 0,
      spxstotal: 0,
      lmxstotal: 0,
      gjxstotal: 0,
      cjryloading: true,
      spxsloading: true,
      lmxsloading: true,
      gjxsloading: true
    }
  },
  created() {
    this.getGatherTaskAllocationData();
    this.getGatherGoodSaleRankingMonthData();
    this.getGatherCategoryIdSaleRankingMonthData();
    this.getGatherCountrySaleRankingMonthData();
  },
  methods: {
    // 采集人员任务列表
    getGatherTaskAllocationData() {
      this.cjryloading = true;
      GatherTaskAllocationData(this.cjryParams).then(res => {
        this.cjryData = res.records;
        this.cjrytotal = res.total;
        this.cjryloading = false;
      })
    },
    // 近一个月商品销售排行（销售金额累计TOP50）
    getGatherGoodSaleRankingMonthData() {
      this.spxsloading = true;
      GatherGoodSaleRankingMonthData(this.spxsParams).then(res => {
        this.spxsData = res.records;
        this.spxstotal = res.total;
        this.spxsloading = false;
      })
    },
    // 近一个月类目销售排行（销售金额累计TOP20）
    getGatherCategoryIdSaleRankingMonthData() {
      this.lmxsloading = true;
      GatherCategoryIdSaleRankingMonthData(this.lmxsParams).then(res => {
        this.lmxsData = res.records;
        this.lmxstotal = res.total;
        this.lmxsloading = false;
      })
    },
    // 近一个月国家销售排行（销售金额累计TOP10）
    getGatherCountrySaleRankingMonthData() {
      this.gjxsloading = true;
      GatherCountrySaleRankingMonthData(this.gjxsParams).then(res => {
        this.gjxsData = res.records;
        this.gjxstotal = res.total;
        this.gjxsloading = false;
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 20px 16px 0;
    margin-bottom: 32px;

    .chart-wrapper-box {
      padding-bottom: 20px;
    }

    p {
      font-size: 16px;
      line-height: 18px;
      margin: 0 0 15px;
      color: #666;
    }
  }

  .margin0 {
    margin: 0;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>